<template>
<div>
  <upload-file accept="image/jpeg,image/jpg,image/png,image/gif"
               v-bind="attrs"
               :fileType="['png', 'jpg', 'jpeg', 'gif']"
               :isShowTip="true"
               :lazy="true"
               :responseFn="handleResponse"
               @remove="handleRemove"
               :action="uploadPath"
               title="图片"
               v-model="newValue"
  ></upload-file>
  <p v-if="attrs.desc" class="desc">{{attrs.desc}}</p>
</div>
</template>

<script>
import formMixin from 'vue-ele-form/lib/mixins/formMixin';
import uploadFile from '@/components/Upload/uploadFile';
import {mapGetters} from 'vuex';
import {getSiteId} from '@/utils/auth';

export default {
    name: 'ele-form-upload-file', // name 属性必须填写, 在使用时, 需要和这里定义的 name 一致
    components: {uploadFile},
    mixins: [formMixin], // 必须引入mixin
    props: {
    // value 是传递过来的值
        value: String,
        // desc是此组件的描述, 结构为
        // { style: {}, class: {}, on: {}, attrs: {} }
        desc: {
            type: Object,
            default () {
                return {};
            }
        }
    },
    computed: {
        ...mapGetters(['siteList', 'addCardId', 'delCardId', 'projectData']),
        siteId () {
            return this.$store.state.user.siteId;
        },
        siteInfo () {
            let info = this.siteList.find(res => res.id === Number(this.siteId));
            return info;
        },
        uploadPath () {
            return process.env.VUE_APP_BASE_API + '/upload-file';
        }
    },
    data () {
        return {
            // 用于v-model绑定, 因为 v-model无法绑定props值
            newValue: this.value
        };
    },
    methods: {
        handleResponse (response, file, fileList) {
            this.$emit('input', response);
            return response;
        },
        handleRemove (val) {
            this.$emit('input', val);
        }
    }
};
</script>

<style scoped lang="scss">
.desc{
  color: #666666;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  text-transform: initial;
  word-wrap: break-word;
  word-break: break-word;
  margin-top: 10px;
  margin-bottom: 10px;
  display: block;
  clear: both;
}
</style>
